<script setup lang="ts">
import { createCommunity } from '@/api/community';
import { Community } from '@/api/community/type';
import Required from '@/components/icons/Required.vue';
import YHeader from '@/components/YHeader.vue';
import { router } from '@/router';
import { UploaderFileListItem } from 'vant';
import { onMounted, ref } from 'vue';

const community = ref({
    name: '',
    description: '',
    title: ''
} as Community);
onMounted(() => {})
const file = ref({} as {
    url: string,
    avatar: File
});
const onSubmit = () => {
    createCommunity(file.value.avatar, community.value.name, community.value.description, community.value.title)
        .then(() => {
            router.back();
        })
}
const afterRead = (uploader: UploaderFileListItem | UploaderFileListItem[]) => {
    if (!Array.isArray(uploader) && uploader.objectUrl != undefined && uploader.file != undefined) {
        file.value.url = uploader.objectUrl;
        file.value.avatar = uploader.file;
    }
}
</script>

<template>
    <div class="container">
        <YHeader></YHeader>
        <div class="content">
            <div class="center uploader">
                <van-uploader :after-read="afterRead" :reupload="true" preview-size="100">
                    <van-image
                        width="100"
                        height="100"
                        :src="file.url"
                    ></van-image>
                </van-uploader>
            </div>
            <div class="center">
                <div class="row">
                    <div class="name">
                        <p>社区名称</p>
                        <Required></Required>
                    </div>
                    <van-field class="input" v-model="community.name" placeholder="名称简单明了~" />
                </div>
                <div class="row">
                    <div class="name">
                        <p>社区简介</p>
                        <Required></Required>
                    </div>
                    <van-field class="input" v-model="community.description"
                        rows="4" autosize show-word-limit
                        type="textarea"
                        placeholder="给你心中的社区做个自我介绍吧~"  maxlength="200"
                    />
                </div>
                <div class="row">
                    <div class="name">
                        <p>成员称号</p>
                        <Required></Required>
                    </div>
                    <van-field class="input" v-model="community.title" placeholder="取一个我们才懂的称号~" />
                </div>
                <div style="margin: 16px; width: 80%;">
                    <van-button :disabled="community.name.length === 0 || community.description.length === 0" round block type="primary" native-type="submit" @click="onSubmit">
                    立即创建
                    </van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.input {
    background-color: whitesmoke;
    border-radius: 15px;
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.row {
    width: 88%;
    flex-direction: column;
    display: flex;
    .name {
        display: flex;
        align-items: center;
    }
}

.content {
    background-color: white;
}
.uploader {
    margin: 3%;
}
.container {
    background-color: white;
}
p {
    font-size: 14px;
}
</style>